<template>
  <div>
    <a-card style="margin-top: 24px;" :bordered="false">
      <template>
        <div class="ant-pro-page-header-search">
          <div class="tabTitle">
            注册用户列表
          </div>
          <a-button type="primary" class="btnTitle">导出提现账单</a-button>
          <a-input-search placeholder="请输入" style="width: 40%; max-width: 300px" @search="onSearch" />
        </div>
        <router-view />
      </template>
      <a-list
        size="large"
        :pagination="{showSizeChanger: false, showQuickJumper: true, pageSize: 5, total: 50}"
      >
        <a-list-item :key="index" v-for="(item, index) in dataTest" class="listContainer">
          <div class="titleContainer">
            <a slot="title" class="adminName">{{ item.name }}</a>
            <div class="stateTag">
              <a-tag v-show="item.stateGather">采集者</a-tag>
              <a-tag v-show="item.stateLearn">学习者</a-tag>
            </div>
            <div class="applyTime">
              <span class="applyTimeTitle">注册时间</span>
              <span>{{ item.startAt }}</span>
            </div>
            <div class="withdrawList">
              <div class="withdrawTitle">有效工时：</div>
              <span>{{ item.workTime }}min</span>
              <div class="withdrawTitle">提现余额：￥</div>
              <span>{{ item.withdrawBalance }}</span>
            </div>
            <div class="confirmBtn">
              <a-button type="primary">编辑</a-button>
            </div>
          </div>
          <div class="contentContainer">
            <div class="contentLeftList">
              性别：<span>{{ item.sex === 1 ? '男' : '女' }}</span>
            </div>
            <div class="contentRightList">
              年龄：<span>{{ item.age }}</span>
            </div>
            <div class="contentLongList">
              身份证号：<span>{{ item.cardID }}</span>
            </div>
            <div class="contentLeftList">
              银行卡：<span>{{ item.BCID }}</span>
            </div>
            <div class="contentRightList">
              开户行：<span>{{ item.BankName }}</span>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import { TagSelect, StandardFormRow, ArticleListContent } from '@/components'
import IconText from './components/IconText'
const TagSelectOption = TagSelect.Option
const dataTest = []
dataTest.push({
  name: '袁甜甜',
  sex: 2,
  age: 18,
  stateLearn: true,
  stateGather: true,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13',
  workTime: 120,
  withdrawBalance: 20
})
dataTest.push({
  name: '朱宇',
  sex: 1,
  age: 18,
  stateLearn: true,
  stateGather: true,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13',
  workTime: 120,
  withdrawBalance: 20
})
dataTest.push({
  name: '孙光浩',
  sex: 1,
  age: 18,
  stateLearn: false,
  stateGather: true,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13',
  workTime: 120,
  withdrawBalance: 20
})
dataTest.push({
  name: '乌总',
  sex: 1,
  age: 18,
  stateLearn: true,
  stateGather: true,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13',
  workTime: 120,
  withdrawBalance: 20
})
dataTest.push({
  name: '王建源',
  sex: 1,
  age: 18,
  stateLearn: true,
  stateGather: true,
  cardID: 140000000000001111,
  BCID: 6222020000111122222,
  BankName: '中国农业银行',
  startAt: '2021-07-25 23:13',
  workTime: 120,
  withdrawBalance: 20
})
export default {
  components: {
    TagSelect,
    TagSelectOption,
    StandardFormRow,
    ArticleListContent,
    IconText
  },
  data () {
    return {
      dataTest,
    //   owners,
      loading: true,
      loadingMore: false,
      data: [],
      search: true,
      form: this.$form.createForm(this)
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleChange (value) {
      console.log(`selected ${value}`)
    },
    getList () {
      this.$http.get('/list/article').then(res => {
        console.log('res', res)
        this.data = res.result
        this.loading = false
      })
    },
    loadMore () {
      this.loadingMore = true
      this.$http.get('/list/article').then(res => {
        this.data = this.data.concat(res.result)
      }).finally(() => {
        this.loadingMore = false
      })
    },
    setOwner () {
      const { form: { setFieldsValue } } = this
      setFieldsValue({
        owner: ['wzj']
      })
    },
    onSearch (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  .tabTitle {
    display: flex;
    // padding-left: 2%;
    font-size: 16px;
    width: 70%;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20%;
  }
  .btnTitle {
    margin-right: 5%;
  }
}

.listContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  // height: 160px;
  // border: solid 1px blue;
  .titleContainer {
    width: 100%;
    display: flex;
    align-items: center;
    // border: solid 1px blue;
    .adminName {
      color: black;
      width: 12%;
      display: flex;
      align-items: center;
      font-size: 16px;
    }
    .stateTag {
      height: 100%;
      display: flex;
      align-items: center;
      width: 20%;
    }
    .applyTime {
      font-size: 16px;
      display: flex;
      max-width: 40%;
      min-width: 30%;
      margin-left: 10%;
      align-items: center;
      // border: solid 1px orange;
      .applyTimeTitle {
         margin-right: 2%;
      }
    }
    .withdrawList {
      font-size: 16px;
      display: flex;
      align-items: center;
      width: 40%;
      // border: solid 1px orange;
      .withdrawTitle {
         margin-left: 5%;
      }
    }
    .confirmBtn {
      display: flex;
      margin-left: 10%;
    }
  }
  .contentContainer {
    // border: solid 1px orange;
    width: 100%;
    height: 7em;
    display: flex;
    flex-flow: row wrap;
    margin-top: 1%;
    .contentLeftList {
      width: 40%;
    }
    .contentLongList {
      width: 100%;
    }
    .contentRightList {
      width: 60%;
    }
  }
}

</style>
